<template>
  <div class="article-main">
    <!-- 1. 搜索栏 -->
    <el-card shadow="never" body-style="padding-bottom: 0;" style="margin: 10px 30px;">
      <div slot="header">
        <span>搜索条件</span>
      </div>
      <el-form ref="form" :model="searchForm" label-width="80px" :inline="false" size="small">
        <el-row :gutter="20">
          <el-col :span="6" :offset="0">
            <el-form-item label="标题">
              <el-input v-model="searchForm.title" placeholder="支持模糊查询" />
            </el-form-item>
          </el-col>
          <el-col :span="6" :offset="0">
            <el-form-item label="作者">
              <el-input v-model="searchForm.author" placeholder="不支持模糊查询" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="6" :offset="18">
            <el-form-item>
              <el-button type="primary" @click="onSearch">查询</el-button>
              <el-button @click="resetSearch">取消</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>

    <!-- 2.数据表格 -->
    <el-card shadow="never" style="margin: 30px;">
      <div slot="header">
        <!-- <span>数据表格</span> -->
        <el-button type="primary" size="default" @click="goAdd">新增</el-button>

      </div>
      <!-- card body -->
      <el-table
        v-loading="loading"
        :data="articleList"
        border
        style="width: 100%"
      >
        <el-table-column
          label="#"
          type="index"
          width="50"
          fixed
        />
        <el-table-column
          prop="title"
          label="文章标题"
          width="180"
        />
        <el-table-column
          prop="author"
          label="作者"
          width="180"
        />
        <el-table-column
          prop="summary"
          label="文章概述"
          width="300"
          show-overflow-tooltip
        />
        <el-table-column
          label="封面图片"
          width="240"
          align="center"
        >
          <template slot-scope="scope">
            <img class="cover-img" :src="scope.row.coverImg" alt="">
          </template>
        </el-table-column>
        <el-table-column
          label="浏览量/赞/收藏"
          align="center"
        >
          <template slot-scope="scope">
            <p class="count-text">浏览量: {{ scope.row.viewCount }}</p>
            <p class="count-text zan-count-text">赞量: {{ scope.row.zanCount }}</p>
            <p class="count-text">收藏量: {{ scope.row.collectCount }}</p>
          </template>
        </el-table-column>
        <el-table-column
          prop="isShow"
          label="是否展示"
        >
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.isShow"
              active-color="#13ce66"
              inactive-color="#ff4949"
              :active-value="1"
              :inactive-value="0"
            />
          </template>
        </el-table-column>
        <el-table-column
          prop="createTime"
          label="创建时间"
          width="200"
        />
        <el-table-column
          label="操作"
          width="220"
          fixed="right"
        >
          <template slot-scope="scope">
            <el-button style="color: red" size="mini" @click="doDel(scope.row.id)">删除</el-button>
            <el-button type="primary" size="mini" @click="goEdit(scope.row.id)">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 3. 分页组件 -->
      <el-pagination
        style="margin-top: 30px; text-align: right;"
        :current-page="page.start"
        :page-sizes="page.sizes"
        :page-size="page.limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="page.totalCount"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />

    </el-card>

  </div>
</template>

<script>
import { findArticles as findArticlesApi } from '@/api/content/article'
export default {
  components: {

  },
  data() {
    return {
      loading: false,
      searchForm: {}, // 搜索栏目的对象
      articleList: [], // 文章列表
      page: {
        start: 1,
        limit: 2,
        // 这里的分页组件,size步长设置不是limit的整倍数,会出现bug
        sizes: [2, 4, 6, 8],
        totalCount: 0
      }
    }
  },
  computed: {

  },
  created() {
    // 获取数据
    this.findArticleList()
  },
  mounted() {

  },
  methods: {
    // 执行条件查询
    // 逻辑: 查询的时候,需要重置分页;分页的时候,需要保留查询条件;
    onSearch() {
      console.log(this.searchForm)
      this.findArticleList()
      this.page.start = 1
      this.page.limit = 2
    },
    // 重置查询
    resetSearch() {
      // 重置查询条件
      this.searchForm = {}
      this.findArticleList()
    },
    // 查询文章列表信息
    findArticleList() {
      // 开启loading
      this.loading = true
      const { start, limit } = this.page
      findArticlesApi(start, limit, this.searchForm)
        .then(res => {
          // console.log(res)
          const { success, data, message: errMsg } = res
          if (success) {
            // 获取数据
            const { rows, total } = data
            this.articleList = rows
            // 用于处理分页
            this.page.totalCount = total
          } else {
            // 失败提示
            this.$message.error(errMsg)
          }
          // 不管成功失败都要关闭loading
          this.loading = false
        })
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
      this.page.limit = val
      // 重新发送请求
      this.findArticleList()
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      this.page.start = val
      // 重新发送请求
      this.findArticleList()
    },
    // 去新增页面
    goAdd() {
      // 页面跳转建议使用name,方便传递参数
      this.$router.push({ name: 'contentArticleAdd' })
    },
    doDel(id) {

    },
    goEdit(id) {
      // 往编辑页面跳转
      // #https://router.vuejs.org/zh/guide/essentials/navigation.html
      this.$router.push({ name: 'contentArticleEdit', params: { id }})
    }
  }
}
</script>

<style scoped lang="scss">
  .article-main{
    .cover-img{
      width: 200px;
      height: 100px;
    }
    .count-text{
      margin: 0 ;
      padding: 0;
      &.zan-count-text{
        color: red;
      }
    }
  }
</style>
